<template>

    <div class="foot">
      <div class="foot-item" :class="{on: '/home'===$route.path}" @click="goTo('/home')">
        <span class="foot-item-icon home">
          <i class="iconfont icon-home" ></i>
          <!--<i class="fa fa-home fa-fw" aria-hidden="true"></i>-->
        </span>
        <span class="text">
          首页
        </span>
      </div>
      <div class="foot-item" :class="{on: '/search'===$route.path}" @click="goTo('/search')">
        <span class="foot-item-icon">
          <i class="iconfont icon-search" ></i>
          <!--<i class="fa fa-home fa-fw" aria-hidden="true"></i>-->
        </span>
        <span class="text">
          搜索
        </span>
      </div>
      <div class="foot-item" :class="{on: '/order'===$route.path}" @click="goTo('/order')">
        <span class="foot-item-icon">
          <i class="iconfont icon-order" ></i>
          <!--<i class="fa fa-home fa-fw" aria-hidden="true"></i>-->
        </span>
        <span class="text">
          订单
        </span>
      </div>
      <div class="foot-item" :class="{on: '/personal'===$route.path}" @click="goTo('/personal')">
        <span class="foot-item-icon">
          <i class="iconfont icon-personal" ></i>
          <!--<i class="fa fa-home fa-fw" aria-hidden="true"></i>-->
        </span>
        <span class="text">
          我
        </span>
      </div>
    </div>
</template>

<script>
    export default {
        name: "pagefoot",
        data() {
            return {};
        },
        methods: {
          goTo (path) {
            this.$router.replace(path)
          }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  .foot  //footer
    top-border-1px(#e4e4e4)
    position fixed
    z-index 100
    left 0
    right 0
    bottom 0
    background-color #fff
    width 100%
    height 50px
    display flex
    .foot-item
      display flex
      flex 1
      text-align center
      flex-direction column
      align-items center
      margin 5px
      color #999999
      &.on
        color rgb(100, 200, 256)
      span
        font-size 12px
        margin-top 2px
        margin-bottom 2px
        .iconfont
          font-size 22px

</style>
